import Vue from 'vue'

//导入路由的包
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter)

//导入Vuex
import Vuex from 'vuex'
//注册Vuex
Vue.use(Vuex)

var car = JSON.parse(localStorage.getItem('car') || '[]')//从本地存储获取json数据
var store = new Vuex.Store({
  state: {//相当于data，this.$store.state.***
    car: car//将购物车中的商品的数据，用一个数组存储起来[{id:xx,count:xx,price:xx,selected:true}]
  },
  mutations: {//相当于methods，this.$store.commit('方法名称','按需传递参数')
    addToCar(state, goodsinfo) {
      var flag = false //假设在购物车中没有找到对应的商品
      state.car.some(item => {//如果在仓储中找到相同的商品，则将该商品数量相加
        if (item.id == goodsinfo.id) {
          item.count += parseInt(goodsinfo.count)
          flag = true
          return true
        }
      })
      if (!flag) {//如果在存储中没有找到相同的商品，则新增商品
        state.car.push(goodsinfo)
      }
      //当更新car之后，把car数组，存储到本地的localStorage中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updateGoodsInfo(state, goodsinfo) {
      //修改购物车中商品的数值
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count = parseInt(goodsinfo.count)
          return true
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    removeFromCar(state, id) {
      //根据ID，从store中的购物车删除对应数据
      state.car.some((item, i) => {
        if (item.id == id) {
          state.car.splice(i, 1)
          return true
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updateGoodsSelected(state, info) {
      state.car.some(item => {
        if (item.id == info.id) {
          item.selected = info.selected
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    }
  },
  getters: {//相当于过滤器fillter和计算器computer结合体，this.$store.getters.***
    getAllCount(state) {
      var c = 0;
      state.car.forEach(item => {
        c += item.count
      })
      return c
    },
    getGoodsCount(state) {//获取购物车中商品的数量  {商品id:商品数量}
      var o = {}
      state.car.forEach(item => {
        o[item.id] = item.count
      })
      return o
    },
    getGoodsSelected(state) {
      //查找选取状态
      var o = {}
      state.car.forEach(item => {
        o[item.id] = item.selected
      })
      return o
    },
    getGoodsCountAndAmount(state) {
      //计算选中的商品数量和价格
      var o = {
        count: 0,//设置默认勾选数量为0
        amount: 0//设置默认结算金额为0
      }
      state.car.forEach(item => {
        if (item.selected) {
          o.count += item.count
          o.amount += item.price * item.count
        }
      })
      return o
    }
  }
})

//设置json数据请求的根路径
//Vue.http.options.root = 'http://localhost:8080/';

//导入axios
import axios from 'axios'
//其他vue组件中就可以this.$axios调用使用
Vue.prototype.$axios = axios

//导入自己的router.js路由模块
import router from './router.js'

//导入时间组件
import moment from 'moment'
//定义时间全局过滤器
Vue.filter('dateFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
  return moment(dataStr).format(pattern)//制定时间dataStr，如果是当前时间moment().format(pattern)
})

//导入MUI的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

//按需导入Mint-UI中的组件
//import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
//导入mint-ui组件（它会去node_modules目录下找）
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'
//注册mint-ui组件
/*Vue.component(Header.name, Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Button.name, Button)
Vue.use(Lazyload)*/

//安装图片预览插件（图片详情）
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//导入 App 根组件
import app from './App.vue'

var vm = new Vue({
  el: '#app',
  render: c => c(app),
  router,
  store//挂在vuex的store状态管理工具
})